<template>
  <div>
    <el-main>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#409EFF', color: '#ffffff' }"
        :cell-style="cellStyle"
        @row-click="getUserDetail"
      >
        <el-table-column
          fixed="left"
          prop="date"
          label="日期"
          width="100"
          header-align="center"
          align="center"
        >
        </el-table-column>

        <el-table-column
          label="出勤统计"
          header-align="center"
          align="center"
          style="background: #ffffff"
        >
          <el-table-column
            prop="sattend"
            label="应出勤"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="attend"
            label="实出勤"
            header-align="center"
            align="center"
          >
          </el-table-column>
        </el-table-column>

        <el-table-column label="休假统计" header-align="center" align="center">
          <el-table-column
            prop="person"
            label="事假"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="sick"
            label="病假"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="annual"
            label="年假"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="mate"
            label="婚假"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="dead"
            label="丧家"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="pregnant"
            label="产假"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="withpregnant"
            label="陪产假"
            header-align="center"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="otexchange"
            label="加班调休"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="btexchange"
            label="出差调休"
            header-align="center"
            align="center"
          >
          </el-table-column>
        </el-table-column>

        <el-table-column label="异常统计" header-align="center" align="center">
          <el-table-column
            prop="late"
            label="迟到"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="leave"
            label="早退"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="absent"
            label="旷工"
            header-align="center"
            align="center"
          >
          </el-table-column>
        </el-table-column>

        <el-table-column
          label="漏打卡统计"
          header-align="center"
          align="center"
        >
          <el-table-column
            prop="lackon"
            label="上班"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="lackoff"
            label="下班"
            header-align="center"
            align="center"
          >
          </el-table-column>
        </el-table-column>

        <el-table-column label="加班统计" header-align="center" align="center">
          <el-table-column
            prop="ot"
            label="总时长"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="otwd"
            label="工作日"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="otrd"
            label="休息日"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="othd"
            label="节假日"
            header-align="center"
            align="center"
          >
          </el-table-column>
        </el-table-column>

        <el-table-column label="转调休" header-align="center" align="center">
          <el-table-column
            prop="otwdc"
            label="工作日"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="otrdc"
            label="休息日"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="othdc"
            label="节假日"
            header-align="center"
            align="center"
          >
          </el-table-column>
        </el-table-column>

        <el-table-column label="转加班费" header-align="center" align="center">
          <el-table-column
            prop="otwdcf"
            label="工作日"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="otrdcf"
            label="休息日"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="othdcf"
            label="节假日"
            header-align="center"
            align="center"
          >
          </el-table-column>
        </el-table-column>
      </el-table>
    </el-main>


  </div>
</template>
    
    <script>
export default {
  props: ["tableData"],
  methods: {
    getUserDetail(row) {
      this.$bus.$emit("getUserDetail", row);
    },

    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    },

    handleSizeChange(val) {
      this.$emit("handleSizeChange", val);
    },

    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (row.person != 0 && columnIndex === 3) {
        return "background:oldlace";
      }
      if (row.sick != 0 && columnIndex === 4) {
        return "background:oldlace";
      }
      if (row.annual != 0 && columnIndex === 5) {
        return "background:oldlace";
      }
      if (row.mate != 0 && columnIndex === 6) {
        return "background:oldlace";
      }
      if (row.dead != 0 && columnIndex === 7) {
        return "background:oldlace";
      }
      if (row.pregnant != 0 && columnIndex === 8) {
        return "background:oldlace";
      }
      if (row.withpregnant != 0 && columnIndex === 9) {
        return "background:oldlace";
      }
      if (row.otexchange != 0 && columnIndex === 10) {
        return "background:oldlace";
      }
      if (row.btexchange != 0 && columnIndex === 11) {
        return "background:oldlace";
      }
      if (row.late != 0 && columnIndex === 12) {
        return "background:rgb(255, 195, 195)";
      }
      if (row.leave != 0 && columnIndex === 13) {
        return "background:rgb(255, 195, 195)";
      }
      if (row.absent != 0 && columnIndex === 14) {
        return "background:rgb(255, 195, 195)";
      }
      if (row.lackon != 0 && columnIndex === 15) {
        return "background:rgb(255, 195, 195)";
      }
      if (row.lackoff != 0 && columnIndex === 16) {
        return "background:rgb(255, 195, 195)";
      }
      if (row.ot != 0 && columnIndex === 17) {
        return "background:#f0f9eb";
      }
      if (row.otwd != 0 && columnIndex === 18) {
        return "background:#f0f9eb";
      }
      if (row.otrd != 0 && columnIndex === 19) {
        return "background:#f0f9eb";
      }
      if (row.othd != 0 && columnIndex === 20) {
        return "background:#f0f9eb";
      }
      if (row.otwdc != 0 && columnIndex === 21) {
        return "background:#f0f9eb";
      }
      if (row.otrdc != 0 && columnIndex === 22) {
        return "background:#f0f9eb";
      }
      if (row.othdc != 0 && columnIndex === 23) {
        return "background:#f0f9eb";
      }
      if (row.otwdcf != 0 && columnIndex === 24) {
        return "background:#f0f9eb";
      }
      if (row.otrdcf != 0 && columnIndex === 25) {
        return "background:#f0f9eb";
      }
      if (row.othdcf != 0 && columnIndex === 26) {
        return "background:#f0f9eb";
      } else {
        return "";
      }
    },
  },
};
</script>
    
    <style lang="scss" scoped>
</style>